<template>
  <div class="year-electricity">
    <div class="base-background"></div>
    <div class="base-frame-img">
      <div class="box-title">
        <div class="box-t-icon"></div>
        <div class="box-t-text">本年电量明细统计</div>
      </div>
      <div class="box-content">
        <div class="y-e-box-chart" ref="myYERef"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { getQuantityStatistics } from '@/api/homepageApi'
import { useBigScreenStore } from "@/pinia/bigScreen";
const { appContext: { config: { globalProperties } } } = getCurrentInstance()
const bsStore = useBigScreenStore();
import delOptionJson from "@/views/bigscreen/components/YearElectricity.json";


// echarts实例
let myYERef = ref(null);
let myChart = null;
let poms = { start: '', end: '', projectIds: bsStore.projectId, isRealMeter: true, mode: '0' }

watch(() => bsStore.projectId, (newValue, oldValue) => {
  if (newValue === 'all') {
    getQSList(bsStore.projectIds.join(','), 'all')
  } else {
    getQSList(bsStore.projectId, 'one')
  }
})

onMounted(() => {
  myChart = echarts.init(myYERef.value);
  renderChart(delOptionJson)
});

const renderChart = (opt) => { myChart.setOption(opt) };

// 获取今年第一天的日期
const getStartTime = () => {
  return globalProperties.$dayjs().startOf('year').format("YYYY-MM-DD 00:00:00")
}

// 获取当前时间
const getEndTime = () => {
  return globalProperties.$dayjs(new Date()).format("YYYY-MM-DD HH:00:00")
}

// 数据补位
const coveringNum = (data, key) => {
  let newArr = []
  if (data.length > 0) {
    const m = data[0][key].split('-')
    for (let index = 1; index < 13; index++) {
      let ym = m[0] + '-' + (index < 10 ? '0' + index : index)
      let val = 0
      data.forEach(element => { if (element[key] === ym) { val = element.totalDiff } });
      newArr.push(val)
    }
  }
  return newArr;
}

// 获取单个项目的电量数据
const getQSList = async (ids, type) => {
  // 真实电表【绿】 理论计算【蓝】
  poms.start = getStartTime()
  poms.end = getEndTime()
  poms.projectIds = ids
  poms.isRealMeter = true
  let curOption = JSON.parse(JSON.stringify(delOptionJson))
  let ecaherData = []
  if (type !== 'all') {
    const oval = await getQuantityStatistics(poms)
    curOption.series = [JSON.parse(JSON.stringify(delOptionJson)).series[0]]
    if (oval.data.length === 0) {
      poms.isRealMeter = false
      const res = await getQuantityStatistics(poms)
      curOption.series = [JSON.parse(JSON.stringify(delOptionJson)).series[1]]
      ecaherData = res.data
    } else {
      ecaherData = oval.data
    }
    curOption.legend.data = ['能耗信息']
    curOption.series[0].name = '能耗信息'
    curOption.series[0].data = coveringNum(ecaherData, '_id')
    console.log('本年数据->', curOption.series[0].data);
  } else {
    poms.isRealMeter = true
    const objval1 = await getQuantityStatistics(poms)
    curOption.series[0].data = coveringNum(objval1.data, '_id')
    poms.isRealMeter = false
    const objval2 = await getQuantityStatistics(poms)
    curOption.series[1].data = coveringNum(objval2.data, '_id')
  }
  myChart.clear()
  renderChart(curOption)
}

</script>

<style lang="scss" scoped>
.year-electricity {
  width: 48.5%;
  margin-right: 1%;
}

.base-background {
  position: absolute;
  overflow: hidden;
  padding: 2px 1px;
  cursor: pointer;
  background-color: #003f6f;
  border-radius: 15px;
  min-width: 392px;
  opacity: 0.66;
  width: 48.5%;
  min-height: 200px;
  height: 17rem;
}

.base-frame-img {
  position: relative;
  margin-left: 2px;
  top: 3px;
  padding: 10px 15px 0px 15px;
  background: url(/src/assets/wbe4/zhanshic.png) center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  min-width: 390px;
  min-height: 200px;
  height: 17rem;
}

.box-title {
  display: flex;
}

.box-t-text {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 32px;
  margin-left: 3px;
  user-select: none;
}

.box-t-icon {
  width: 32px;
  height: 32px;
  background: url(/src/assets/wbe4/tubiao.png) center no-repeat;
  background-size: 100% 100%;
}

.item-text {
  color: #b9ccd3;
  margin: 0.7vh 0vw;
  font-size: 12px;
}

.box-content {
  display: flex;
  justify-content: space-around;
  height: 82%;
}

.y-e-box-chart {
  width: 100%;
  height: 100%;
}
</style>